<template>
  <div class="xtx-category">
    <div class="container">
      <!-- 面包屑 -->
      <div class="xtx-category-bread">
        <Bread>
          <BreadItem to="/">首页</BreadItem>
          <transition name="fade-right" mode="out-in">
            <BreadItem :key="topCategory?.id">{{
              topCategory?.name
            }}</BreadItem>
          </transition>
        </Bread>
      </div>
      <!-- 轮播图 -->
      <div class="xtx-category-banner">
        <Carousel :banner-image-list="bannerImageList" />
      </div>
      <!-- 所有二级分类 -->
      <div class="xtx-category-sublist">
        <h3>全部分类</h3>
        <ul>
          <li v-for="cate in topCategory?.children" :key="cate.id">
            <router-link to="/">
              <img :src="cate.picture" alt="" />
              <p>{{ cate.name }}</p>
            </router-link>
          </li>
        </ul>
      </div>
      <!-- 分类商品 -->
      <Goods />
    </div>
  </div>
</template>

<script setup lang="ts">
import Carousel from '@/components/Carousel.vue'
import { ref, computed } from 'vue'
import { bannerAPI } from '@/api/home/index'
import { Banner } from '@/api/home/types.d'
import { useRoute } from 'vue-router'

import Goods from './components/Goods.vue'
import { useCategoryStore } from '@/store/modules/category'
import { storeToRefs } from 'pinia'
defineOptions({
  name: 'Category'
})
/** 轮播图列表 */
const bannerImageList = ref<Banner[]>([])
/** 获取轮播图列表 */
bannerAPI()
  .then((res) => {
    bannerImageList.value = res
  })
  .catch((error) => {
    console.log(error)
  })

/** 获取二级分类 */
/** 路由信息对象 */
const route = useRoute()

const { categoryList } = storeToRefs(useCategoryStore())

const topCategory = computed(() => {
  const id = route.params.id
  return categoryList.value.find((cate) => {
    return cate.id === id
  })
})

console.log('topCategory', topCategory.value)
</script>

<style lang="scss" scoped>
.xtx-category {
  padding-bottom: 20px;
  background-color: $bg-gary;

  &-bread {
    padding: 25px 10px;
  }

  &-banner {
    height: 500px;
  }

  &-sublist {
    margin-top: 20px;
    background-color: $basic-white;

    h3 {
      line-height: 100px;
      color: #666;
      font-size: 28px;
      font-weight: 400;
      text-align: center;
    }

    ul {
      display: flex;
      flex-wrap: wrap;
      padding: 0 32px;

      li {
        width: 168px;
        height: 160px;

        a {
          display: block;
          text-align: center;

          img {
            width: 100px;
            height: 100px;
          }

          p {
            line-height: 40px;
          }
        }

        &:hover {
          a {
            p {
              color: $xtx-color;
            }
          }
        }
      }
    }
  }
}
</style>
